<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <style>
    html {
    	padding: 10px;
    }
    
    body{
    	overflow-y: scroll;
    }
    label.layui-form-label {
      width: 60px;
    }

    div.layui-form-item {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
<!-- 搜索表单 -->
<blockquote class="layui-elem-quote layui-quote-nm">
  <form id="search_form" class="layui-form" action="" lay-filter="search_form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label" style="margin-left:-45px;">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline">
            <select name="category" id="categorySelect">
              <option value="">请选择分类</option>
              
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">发表日期</label>
          <div class="layui-input-inline">
            <input type="text" name="created" id="createdDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="post-search">
              <i class="layui-icon">&#xe615;</i>搜索
          </button>
        </div>
      </div>
    </form>
</blockquote>

<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd">添加文章</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnDeleteBatch">批量删除</button>


<!-- 文章列表 -->
<table class="layui-hide" id="posts"></table>

<script src="../layui/layui.js" charset="utf-8"></script>

<script>
layui.use(['table', 'laydate', 'form'], function(){
  var table = layui.table;
  var laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#createdDate'
  });

  table.render({
    elem: '#posts'
    ,cellMinWidth: 80
    ,cols: [[
      {checkbox:true},
      {field:'id', width:80, title: 'ID'},
      {field:'title', minwidth:300, title: '标题'},
      {field:'created', width:220, title: '创建时间'},
      {field:'category', width:150, title: '分类', templet: function(data) {
    	  
    	  // 对某一列的数据进行格式化或者格式的转换
    	  if (data.category) {
    		  return data.category.name;
    	  } else {
    		  return '';
    	  }
      }}
    ]],
    url: '../post/findPage',
    page: true
  });

  var $ = layui.$;
  $('#btnAdd').on('click', function() {
	// 跳到添加文章界面 pages/post_form.html
	// BOM api  browser object model , history, location
	window.location = "post_form.html";
  });

  $('#btnDeleteBatch').on('click', function() {
	// 获取选中行的id，把选中的多个id传到后台
	var checkStatus = table.checkStatus('posts'); //test即为基础参数id对应的值
 
	console.log(checkStatus.data) //获取选中行的数据
	
	var ids = [];
	for (var i = 0; i < checkStatus.data.length; i++) {
		ids.push(checkStatus.data[i].id);
	}
	
	var param = {"ids": ids};
	
	// deleteBatch?ids=1&ids=2&ids=3
	$.get("../post/deleteBatch?" + $.param(param, true), function(data) {
		layer.msg('删除成功！');
		table.reload('posts');
	});
  });
  
  var form = layui.form;
  
  // 页面加载完成之后，查询所有的分类信息，显示到下拉框
  $.get("../category/findAll", function(response) {
	  var categories = response.data;
	  
	  // <option value='id'>name</option>
	  for (var i = 0; i < categories.length; i++) {
		  var item = categories[i];
		  var option = "<option value='" + item.id + "'>" + item.name + "</option>";
		  $('#categorySelect').append(option);
	  }
	  
	  form.render('select');
  });
  
  // 监听表单提交
  form.on('submit(post-search)', function(data) {
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  
// 	  $.get("../post/search", data.field, function(response) {
// 		  layer.msg('搜索成功！');
// 	  });
	  
	  table.reload('posts', {
		  url: "../post/search",
		  where: data.field,
		  page: {
			  curr: 1  // 重新从第一页开始显示
		  }
	  });

	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });

});
</script>

</body>
</html>